<!DOCTYPE html>
<html lang="cn" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
        button {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<form action="/user/login" method="post">
    <label>用户名</label><br/>
    <input type="text" name="username" required><br/>
    <label>密码</label><br/>
    <input type="password" name="password" required><br/>
<!-- xmlns:th="http://www.thymeleaf.org"   记住我：<input type="checkbox"name="remember-me"title="记住密码"/><br/>-->
    <button type="submit" value="login">登录</button>

</form>
</body>
</html>

<!--<!DOCTYPE html>-->
<!--<html lang="cn" >-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        form {-->
<!--            width: 300px;-->
<!--            margin: 0 auto;-->
<!--            padding: 20px;-->
<!--            border: 1px solid #ccc;-->
<!--            border-radius: 5px;-->
<!--        }-->
<!--        input {-->
<!--            width: 100%;-->
<!--            padding: 10px;-->
<!--            margin-bottom: 10px;-->
<!--        }-->
<!--        button {-->
<!--            background-color: #007bff;-->
<!--            color: #fff;-->
<!--            padding: 10px 20px;-->
<!--            border: none;-->
<!--            border-radius: 5px;-->
<!--            cursor: pointer;-->
<!--        }-->
<!--        button:hover {-->
<!--            background-color: #0056b3;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<form id="loginForm">-->
<!--    <label>用户名</label><br/>-->
<!--    <input type="text" name="username" required><br/>-->
<!--    <label>密码</label><br/>-->
<!--    <input type="password" name="password" required><br/>-->
<!--    <button type="submit">登录</button>-->
<!--</form>-->

<!--<script>-->
<!--    document.getElementById('loginForm').addEventListener('submit', function (event) {-->
<!--        event.preventDefault(); // 阻止表单默认提交-->

<!--        const formData = {-->
<!--            username: this.username.value,-->
<!--            password: this.password.value-->
<!--        };-->

<!--        fetch('/user/login', {-->
<!--            method: 'POST',-->
<!--            headers: {-->
<!--                'Content-Type': 'application/json'-->
<!--            },-->
<!--            body: JSON.stringify(formData)-->
<!--        })-->
<!--            .then(response => {-->
<!--                if (!response.ok) {-->
<!--                    throw new Error('网络错误');-->
<!--                }-->
<!--                return response.json();-->
<!--            })-->
<!--            .then(data => {-->
<!--                console.log('成功:', data);-->
<!--                // 处理成功响应数据-->
<!--            })-->
<!--            .catch(error => {-->
<!--                console.error('错误:', error);-->
<!--                // 处理错误-->
<!--            });-->
<!--    });-->
<!--</script>-->
<!--</body>-->
<!--</html>-->